<template>
  <div>
    <div class="search-group">
      <div class="search-item">
        <el-input v-model="query.id" placeholder="请输入id" />
        <el-input v-model="query.operationDescribe" placeholder="请输入操作描述" />
        <el-input v-model="query.requestIp" placeholder="请输入请求ip" />
        <el-input v-model="query.requestUrl" placeholder="请输入请求路径" />
      </div>
      <el-button-group>
        <el-button icon="el-icon-search" @click="search" />
        <el-button icon="el-icon-refresh" @click="reset" />
      </el-button-group>
      <div class="excel-option-group">
        <el-upload
          slot="append"
          style="display: inline-block;"
          action="#"
          :auto-upload="false"
          :show-file-list="false"
          accept="application/zip,application/x-zip,application/x-zip-compressed"
          :on-change="upLoadExcel"
        >
          <el-button icon="el-icon-upload2">上传bpmn压缩包</el-button>
        </el-upload>
      </div>
    </div>
    <div class="content">
      <el-table v-loading="table.loading" :data="table.data" border style="width: 100%">
        <el-table-column align="center" label="id" prop="id" />
        <el-table-column align="center" label="分类" prop="category" />
        <el-table-column align="center" label="名称" prop="name" />
        <el-table-column align="center" label="定义的KEY" prop="key" />
        <el-table-column align="center" label="操作" fixed="right" width="180px">
          <template slot-scope="{row}">
            <el-button-group class="operation">
              <l-button type="text" auto-loading @click="(next)=>clickStartFlow(row,next)">启动</l-button>
              <el-button v-permission="['sys_logs:list']" type="text" @click="seeRuntimeTask()">运行中任务</el-button>
              <l-button v-permission="['sys_logs:list']" type="text" auto-loading @click="(next)=>clickSeeFlowImg(row,next)">查看流程图</l-button>
              <c-button
                v-permission="['sys_logs:delete']"
                type="text"
                auto-confirm
                @confirm="remove(row.id)"
              />
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <table-page
        :total="table.total"
        :current="query.pageNum"
        :size="query.pageSize"
        @settingTablePage="settingTablePage"
      />
    </div>
    <open-img-dialog ref="openImgDialog" />
  </div>
</template>

<script>

import TablePage from '@/components/tablePage'
import CButton from '@/components/confirmButton/CButton'
import LButton from '@/components/loadingButton/LButton'
import OpenImgDialog from '@/components/openImgDialog/index'
import {
  getByPage, deleteById,
  startFlow, importBpmnFile
} from '@/api/modules/flowable/procdef'
export default {
  name: 'Index',
  components: {
    CButton, TablePage, LButton, OpenImgDialog
  },
  data() {
    return {
      query: {},
      table: {
        data: null,
        total: null,
        loading: false
      }
    }
  },
  created() {
    this.search()
  },
  methods: {
    search() {
      this.query.pageNum = 1
      this.getTableData()
    },
    reset() {
      this.query.id = null
      this.query.operationStatus = null
      this.query.operationDescribe = null
      this.query.requestIp = null
      this.query.requestUrl = null
      this.search()
    },
    getTableData() {
      this.table.loading = true
      getByPage(this.query).then(res => {
        this.table.total = res.total
        this.table.data = res.rows
        this.table.loading = false
      })
    },
    settingTablePage(pageNum, pageSize) {
      this.query.pageNum = pageNum
      this.query.pageSize = pageSize
      this.getTableData()
    },
    remove(id) {
      deleteById(id).then(res => {
        this.$message.success('删除成功')
        this.search()
      })
    },
    seeRuntimeTask() {
      this.$router.push('/processDefinition/runtimeTask')
    },
    clickStartFlow(item, next) {
      startFlow({
        deploymentId: item.id
      }).then(res => {
        this.$message.success('启动成功')
      }).finally(() => {
        next()
      })
    },
    clickSeeFlowImg(item, next) {
      const url = process.env.VUE_APP_BASE_API + '/flowableProcdef/getFlowImg?deploymentId=' + item.id
      this.$refs['openImgDialog'].open(encodeURIComponent(url))
      next()
    },
    upLoadExcel(file, fileList) {
      // 文件上传前做一下判断
      // const type_ALLOWD = ['doc', 'docx', 'txt', 'xls', 'xlsx', 'text', 'pdf']
      const type_ALLOWD = ['zip']
      const fileType = file.raw.name.substring(
        file.raw.name.lastIndexOf('.') + 1
      )
      // 判断文件格式
      if (type_ALLOWD.indexOf(fileType) === -1) {
        this.$message.error("只能上传以'.zip'结尾的文件,请重新上传！")
      } else {
        const formData = new FormData()
        formData.append('file', file.raw)
        const loading = this.$loading({
          lock: true,
          text: '导入数据中，请勿关闭浏览器！',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        importBpmnFile(formData).then((res) => {
          this.$message.success('导入成功！')
          this.search()
        }).finally(() => {
          loading.close()
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
